<template>
  <div id="order">
    <el-card id="notice">
      <el-row type="flex" justify="space-between">
        <el-col>
          <span id="note" >[公告]</span>
        </el-col>
        <el-col>
          <a id="more" href="">更多+</a>
        </el-col>
      </el-row>
    </el-card>
    <el-card id="moment">
      <span style="color: #7f7f7f">我的订单</span>
    </el-card>
    <el-card id="btable">
      <el-row type="flex" justify="start" style="margin-bottom: 1rem">
        <el-col>
          <div id="semester">学期：<el-select v-model="semester" placeholder="请选择学期" clearable size="small" style="width: 240px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
        </el-select></div>
        </el-col>
      </el-row>
      <el-table
          :data="tableNewData"
          :span-method="objectSpanMethod"
          border
          :header-cell-style="isCenter"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column prop="id" label="订单号" align="center" > </el-table-column>
        <el-table-column label="教材" width="440px" >
          <template slot-scope="scope">
            <div>
              {{scope.row.title}}
            </div>
            <div>
              码洋￥{{scope.row.totalPrice}}、
              实洋￥{{scope.row.shiYang}}、
              应付￥<span>{{scope.row.copeWith}}</span>、
              已付￥<span>{{scope.row.paidIn}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" >
          <template slot-scope="scope">
            X{{scope.row.totalNumber}}
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center">
          <template slot-scope="scope">
            ￥{{scope.row.unitPrice}}
          </template>
        </el-table-column>
        <el-table-column prop="discount" label="折扣" align="center"> </el-table-column>
        <el-table-column label="金额" align="center" >
          <template slot-scope="scope">
            <div>码洋￥{{scope.row.totalPriceSum}}、</div>
            <div>实洋￥{{scope.row.shiYangSum}}、</div>
            <div>应付￥<span>{{scope.row.copeWithSum}}</span>、</div>
            <div>已付￥<span>{{scope.row.paidInSum}}</span></div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" > </el-table-column>
        <el-table-column label="操作" align="center" width="140" >
          <template slot-scope="scope">
            <el-button type="warning" @click="jumpToThePay(scope.row)" size="mini">支付</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 1rem">
        <el-col>
          <el-button id="addPay" type="primary" @click="showDialogAndJump">合并支付</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
        title="信息"
        :visible.sync="dialogShow"
        width="30%"
        :before-close="handleClose">
        <span> 订单{{codMessage}}是否支付成功？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="dialogShow = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "order",
  data() {
    return {
      semester: '', // 选项框
      tableNewData: [], // table表中的值
      hoverOrderArr: [], //
      OrderIndexArr: [], // 储存每行中的id
      options: [{
        label: '20-21年第一学期',
        value: '1'
      },{
        label: '20-21年第二学期',
        value: '2'
      },], // 选项框的值
      queryParams: {
        id: '',
        totalPriceSum: 0, // 总码洋
        paidInSum: 0, // 总已付
        shiYangSum: 0, // 总实洋
        copeWithSum: 0, // 总应付
        status: '', // 付款状态
        list: [],
        pageNum: 1,
        pageSize: 10, //每页的数据
      },
      childrenList: {
        title: '', // 教材标题
        totalPrice: 0.00,
        shiYang: 0.00,
        copeWith: 0.00,
        paidIn: 0.00,
        totalNumber: 0, // 数量
        unitPrice: 0, // 单价
        discount: 0, // 折扣
      },
      tableData: [
        {
          id: 'C1338399704778018816 ',
          totalPriceSum: 0, // 总码洋
          paidInSum: 0, // 总已付
          shiYangSum: 0, // 总实洋
          copeWithSum: 0, // 总应付
          status: '等待付款', // 付款状态
          list: [
            {
              title: '病毒学检验（第二版）', // 教材标题
              totalPrice: 50.00,
              shiYang: 38.00,
              copeWith: 38.00,
              paidIn: 0.00,
              totalNumber: 1, // 数量
              unitPrice: 26, // 单价
              discount: 1, // 折扣
            },
            {
              title: '世界现代史（上）（第二版）',
              totalPrice: 41.00,
              shiYang: 31.16,
              copeWith: 31.16,
              paidIn: 0.00,
              totalNumber: 1,
              unitPrice: 26,
              discount: 1,
            }
          ]
        },
        {
          id: 'C1338399704778018817 ',
          totalPriceSum: 0,
          paidInSum: 0,
          shiYangSum: 0,
          copeWithSum: 0,
          status: '等待付款',
          list: [
            {
              title: '世界现代史（下）（第二版）',
              totalPrice: 41.00,
              shiYang: 31.16,
              copeWith: 31.16,
              paidIn: 0.00,
              totalNumber: 1,
              unitPrice: 26,
              discount: 1,
            }
          ]
        }
      ],
      total: 0,
      multipleSelection: [], // checkbox选项
      dialogShow: false, // 弹出框
      codMessage: '',
      loading: false,
    }

  },
  mounted() {
    this.getNewTableData()
    this.getOrderNumber()
  },
  methods: {
    getList() {
      // this.loading = true;
      listOfOrder(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    //表格内容居中显示
    isCenter({ row, column, rowIndex, columnIndex }) {
      return 'text-align:center'
    },
    // 获取相同编号的数组
    getOrderNumber() {
      let OrderObj = {}
      this.tableNewData.forEach((element, index) => {
        element.rowIndex = index
        if (OrderObj[element.id]) {
          OrderObj[element.id].push(index)
        } else {
          OrderObj[element.id] = []
          OrderObj[element.id].push(index)
        }
      })
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k])
        }
      }
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 ||
          columnIndex === 5 || columnIndex === 6 ||
          columnIndex === 7 || columnIndex === 8 ) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i]
          for (let j = 0; j < element.length; j++) {
            let item = element[j]
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                }
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    },
    //获取显示列表
    getNewTableData() {
      this.tableData.map((res) => {
        res.list.map((item) => {
          item.id = res.id
          item.totalPriceSum = res.totalPriceSum
          item.shiYangSum = res.shiYangSum
          item.copeWithSum = res.copeWithSum
          item.paidInSum = res.paidInSum
          item.status = res.status
        })
        this.tableNewData.push(res.list)
      })
      this.tableNewData = this.tableNewData.flat()
    },
    // 计算所有价格
    getTotalPriceSum() {
      let totalPrice = 0
      let shiYang = 0
      let copeWith = 0
      let paidIn = 0
      let id
      for (let n = 0;n < this.tableData.length;n++) {
        if (this.tableData[n].id !== id) {
          totalPrice = 0
          shiYang = 0
          copeWith = 0
          paidIn = 0
        }
        for (let i = 0;i < this.tableData[n].list.length;i++) {
          totalPrice += this.tableData[n].list[i].totalPrice
          shiYang += this.tableData[n].list[i].shiYang
          copeWith += this.tableData[n].list[i].copeWith
          paidIn += this.tableData[n].list[i].paidIn
        }
        this.tableData[n].totalPriceSum = totalPrice
        this.tableData[n].shiYangSum = shiYang
        this.tableData[n].copeWithSum = copeWith
        this.tableData[n].paidInSum = paidIn
        id = this.tableData[n].id
      }
    },
    // 记录checkbox选项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //显示弹出框和跳转
    showDialogAndJump() {
      if (this.multipleSelection.length < 1) {
        this.$message.error('请选择需支付的商品后再点击')
      } else {
        let oven = []
        this.multipleSelection.map(element =>{
          oven.push(element.id)
        })
        this.dialogShow = true
        this.codMessage = oven.toString()
        const hts = this.$router.resolve({path: '/', query: {ids: oven.toString()}})
        window.open(hts.href,"_blank")
      }
    },
    jumpToThePay(row) {
      this.dialogShow = true
      this.codMessage = row.id
      const hts = this.$router.resolve({path: '/',  query: {id: row.id}})
      window.open(hts.href,"_blank")
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
  },
  created() {
    this.getTotalPriceSum()
  }
}
</script>

<style scoped>

#notice {
  margin: 0 20px;
  height: 50px;
}

#more {
  float: right;
}

#note {
  float: left;
}

#semester {
  float: left;
}

span {
  color: red;
}

#moment {
  margin: 10px 20px;
  display: flex;
}

#btable {
  margin: 10px 20px;
}

#addPay {
  float: right;
}

#order {
  margin: 0 300px;
}

</style>
